import { Button, Input, Table } from 'antd';
import '../less/index.less';
import { CloseOutlined, PlusOutlined } from '@ant-design/icons';

export default function EditResTable({ dataSource, addRes, removeRes, inputRes }) {

  let key = 0, columns = [{
    title: '资源名称 ', dataIndex: 'name', key: 'name', width: 200, render: (text, record, index) => {
      return <Input value={record.name} onChange={e => inputRes('name', e.target.value, index)}/>;
    },
  }, {
    title: '资源路径', dataIndex: 'value', key: 'value', width: 350, render: (text, record, index) => {
      return <Input value={text} onChange={e => inputRes('value', e.target.value, index)}/>;
    },
  }, {
    title: '', dataIndex: 'opt', key: 'opt', width: 40, render: (text, record, index) => {
      let disabled = record.isFixed ? 'disabled' : null;
      return (<span>
            <Button title='删除' onClick={e => removeRes(index)} size={'small'} type="ghost"
                    shape="circle" icon={<CloseOutlined/>} disabled={disabled}/>
            </span>);
    },
  },
  ];

  return (
    <div>
      <Table rowKey={record => key++} size={'small'} columns={columns} pagination={false}
             dataSource={dataSource.slice()}/>
      <Button block icon={<PlusOutlined/>} onClick={addRes}
              style={{ marginTop: 5, marginLeft: 15, width: 700 }}>添加资源</Button>
    </div>);

}

